import React, {Component, PropTypes} from 'react';

// 无状态组件可以直接在函数参数中获取context，而有状态组件可以通过this.context和生命周期函数获取context。
function Button(props, context){
    return (
        <button style={{background:context.color}}>
            {props.children}
        </button>
    );
}
Button.propTypes = {
    children : PropTypes.string.isRequired
};
// 没有定义contextTypes， context将会是个空对象。
Button.contextTypes = {
    color : PropTypes.string.isRequired
};


function Message(props){
    return (
        <li>
            {props.text}<Button>Delete</Button>
        </li>
    );
}
Message.propTypes={
    text:PropTypes.string.isRequired
};


export default class MessageList extends Component{

    // 通过getChildContext()方法将color放在context中，并声明了childContextTypes
    getChildContext(){
        return {color:'blue'};
    }
    render(){
        const messages=[
            {text:'Hello React'},
            {text:'Hello Redux'}
        ];
        const children=messages.map((message, key)=>
            <Message key={key} text={message.text}/>
        );
        return (
            <div>
                <p style={{color:'blue'}}>MessageList2.js 通过 context 将 color 跨级传递给里面的Button组件</p>
                <ul>
                    {children}
                </ul>
            </div>
        );
    }
}

//如果不声明 childContextTypes，将无法在组件中使用 getChildContext() 方法。
MessageList.childContextTypes = {
    color : PropTypes.string.isRequired
};

